/*
  订单列表
*/
<template>
  <div class="managegoods">
    <div class="listTop">
      <div class="top">
        <div class="header-top">
          <div><span>订单管理</span></div>
          <div></div>
        </div>
      </div>
      <div style="display: flex">
        <div class="list-branch-left">
          <div
            class="list-nav"
            v-for="(item, index) in orderBranch"
            :key="index"
            @click="tabBox(index,item.id)"
          >
            <div
              :style="[
                { height: '89%' },
                { color: colin === index ? '#436AF2' : 'black' },
              ]"
            >
              {{ item.branch }}
            </div>
            <div
              :style="[
                { 'border-radius': '20px' },
                { 'border-bottom': colin === index ? '3px solid #436AF2' : '' },
              ]"
            ></div>
          </div>
        </div>
        <div class="list-branch-right">
          <el-button>批量标记</el-button>
          <el-button @click="exportd">导出订单</el-button>
        </div>
      </div>
    </div>
    <!-- 搜索区域 -->
    <div style="overflow:hidden">
      <!-- 条件 -->
      <div class="search_header">
        <div class="joinedl">
          <!-- 下单时间 -->
          <div class="search_headerl">
            <el-select v-model="orderTimeSelected" placeholder="请选择">
              <el-option
                v-for="item in orderTimeList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
            <el-date-picker
              prefix-icon=""
              v-model="orderTime"
              type="daterange"
              align="right"
              unlink-panels
              range-separator="~"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :picker-options="pickerOptions"
            >
              <!-- <slot></slot> -->
            </el-date-picker>
          </div>
        </div>
        <div class="joinedr">
          <div class="search_headerr">
            <el-input
              v-model="orderNumber"
              placeholder="请输入查找订单号"
              append="搜索"
            >
              <div slot="append" class="end_text" @click="seach()">搜索</div></el-input
            >
          </div>
        </div>
      </div>
      <!-- 标记 -->
      <div class="listCenter" style="display: flex">
        <div>标记</div>
        <el-tooltip
          class="item"
          effect="dark"
          content="待发货"
          placement="top-start"
        >
          <div class="sign_red"></div>
        </el-tooltip>
        <el-tooltip
          class="item"
          effect="dark"
          content="发货中"
          placement="top-start"
        >
          <div class="sign_blue"></div>
        </el-tooltip>
        <el-tooltip
          class="item"
          effect="dark"
          content="已发货"
          placement="top-start"
        >
          <div class="sign_green"></div>
        </el-tooltip>
        <el-tooltip
          class="item"
          effect="dark"
          content="已完成"
          placement="top-start"
        >
          <div class="sign_orange"></div>
        </el-tooltip>
      </div>
    </div>
    <div class="listBottom" style="background: #fafafa">
      <!-- 列表头 -->
      <table class="table_order" style="background: #fff">
        <tr>
          <th style="width: 30%; text-align: center">
            <div>
              <span>商品信息</span>
            </div>
          </th>
          <th style="width: 10%; text-align: center">
            <div>
              <span>实收金额</span>
            </div>
          </th>
          <th style="width: 30%; text-align: center">
            <div>
              <span>收货信息</span>
            </div>
          </th>
          <th style="width: 10%; text-align: center">
            <div>
              <span>配送及支付方式</span>
            </div>
          </th>
          <th style="width: 10%; text-align: center">
            <div>
              <span>订单状态</span>
            </div>
          </th>
          <th style="width: 10%; text-align: center">
            <div>
              <span></span>
            </div>
          </th>
        </tr>
      </table>
      <!-- 列表数据 -->
      <table
        v-for="(item, index) in orderList"
        :key="index"
        cellspacing="0"
        class="table_bot"
      >
        <!-- 订单号信息 -->
        <tr>
          <td colspan="5">
            <span class="order_num">
              订单号：{{
                item.order_sn
              }}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;下单时间：{{
                item.pay_time
              }}
            </span>
          </td>
          <td style="display: flex;width:120px;">
            <div class="order_details" @click="routerDetails(item.order_id)">
              <span ref="func2">查看详情</span>
            </div>
            <!-- <div
              :class="
                item.order_status === '1' ? 'sign_red' : 'sign_green'
              "
            ></div> -->
            <div v-if="item.order_status==0||item.order_status==1" class="sign_red"></div>
            <div v-if="item.order_status==2" class="sign_green"></div>
            <div v-if="item.order_status==4" class="sign_orange"></div>
          </td>
        </tr>
        <!-- 订单内容 -->
        <tr class="order_item_S">
          <td style="width: 30%">
            <div
              v-for="(item_details, j) in item.goods"
              :key="j"
              :class="
                item.goods.length > 1 && j !== item.goods.length - 1
                  ? 'item_list'
                  : ''
              "
            >
              <div class="order_content">
                <div>
                  <img src="../../assets/img/a.jpg" />
                </div>
                <div>
                  <span>{{ item_details.goods_name }}</span>
                </div>
                <div>
                  <span>样品单价：{{ item_details.goods_price }}</span>
                </div>
                <div>
                  <span>样品数量：{{ item_details.goods_num }}件</span>
                </div>
              </div>
            </div>
          </td>
          <td style="width: 10%; text-align: center">
            <span>{{ item.total_amount }}</span>
          </td>
          <td style="width: 30%; text-align: center">
            <div style="">{{item.consignee}}&nbsp;&nbsp;&nbsp;{{item.mobile}}</div>
            <span>{{item.addr}}</span>
          </td>
          <td style="width: 10%; text-align: center">
            <span>{{ item.shipping_name }}<span v-if="item.pay_name">/{{item.pay_name}}</span></span>
          </td>
          <td style="width: 10%; text-align: center">
            <!-- <span>{{ item.shipmentStatus }}</span> -->
            <span v-if="item.order_status==0">待付款</span>
            <span v-if="item.order_status==1">待发货</span>
            <span v-if="item.order_status==2">待收货</span>
            <span v-if="item.order_status==3">已收货</span>
            <span v-if="item.order_status==4">已完成</span>
            <span v-if="item.order_status==5">取消</span>
            <span v-if="item.order_status==6">申请退款</span>
          </td>
          <td
            style="
              width: 10%;
              text-align: center;
              border: 2px solid #e7e7e8;
              cursor: pointer;
            "
          >
          <template>
            <div
              style="float: left; margin-left: 20%"
              @click="deliverGoods(index,item,'1')"
            >
              <span class="fun" v-if="item.order_status==1">发货</span>
            </div>
            <div @click="deliverGoods(index)">
              <span class="fun" v-if="item.order_status<=1">修改地址</span>
            </div>
            <div @click="deliverGoods(index)">
              <span class="fun" v-if="item.order_status==6">退货</span>
            </div>
          </template>
          </td>
        </tr>
      </table>
      <div class="pagiton">
        <button class="btn-default" type="submit" @click="prePage">
          <i class="el-icon-caret-left"></i>
        </button>
        <button class="btn-defaults" type="submit">{{ current_page }}</button>
        <button
          class="btn-default"
          type="submit"
          @click="nextPage"
          :class="{ disabled: disableds }"
        >
          <i class="el-icon-caret-right"></i>
        </button>
        <div class="remarks">
          共 <span> {{ pagesize }} </span>条当前为第
          <span> {{ currentPage }} </span>页
        </div>
      </div>
    </div>
    <div>
      <OrderExportOrder ref="Popup"></OrderExportOrder>
      <OrderDelivery ref="Delivery" :Delivery='Delivery'></OrderDelivery>
      <OrderRefund ref="Refund" :Refund='Refund'></OrderRefund>
      <OrderIsRefund ref="IsRefund"></OrderIsRefund>
    </div>
  </div>
</template>
<script>
import OrderExportOrder from "./OrderExportOrder.vue";
import OrderDelivery from "./OrderDelivery.vue";//发货对话框
import OrderRefund from "./OrderRefund.vue"; // 验货对话框
import OrderIsRefund from "./OrderIsRefund.vue"; // 退货对话框
export default {
  components: {
    OrderExportOrder,
    OrderDelivery,
    OrderRefund,
    OrderIsRefund,
  },
  data() {
    return {
      Delivery:'',//发货对话框数据
      Refund:'',//退货对话框数据
      orderTimeSelected: "下单时间", // 下单时间-选中的类型
      orderTimeList: [
        {
          label: "下单时间",
          value: "下单时间",
        },
        {
          label: "退单时间",
          value: "退单时间",
        },
      ],
      orderNumber: "", // 订单号搜索
      orderTime: [], //下单时间
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
        shortcuts: [
          {
            text: "今天",
            onClick(picker) {
              picker.$emit("pick", new Date());
            },
          },
          {
            text: "昨天",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit("pick", date);
            },
          },
          {
            text: "一周前",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", date);
            },
          },
        ],
      },
      getorderData: [], // 接口获取列表数据
      orderList: [
        
        {
          number: "20224170959161", // 订单号
          time: "2022年4月17日09:59:16", // 下单时间
          details: false, // 订单详情
          item: "仿真凤凰葵散尾葵北欧风装饰客厅落地大 栽室内盆景摆件假绿植", // 订单物品
          itemlist: [
            {
              item: "仿真凤凰葵散尾葵北欧风装饰客厅落地大 栽室内盆景摆件假绿植", // 订单物品
              sum: "2", // 样品数量
              unitPrice: "10", //单价
            },
          ],
          sum: "2", // 样品数量
          unitPrice: "10", //单价
          price: "￥300.00", // 订单价格
          address: "孙玲玲15053558987河北省", // 订单地址
          payment: "物流配送/微信支付", // 支付方式
          shipmentStatus: "待发货", // 配送状态
          nextStep: "发货", // 处理步骤
        },
        {
          number: "20224170959162", // 订单号
          time: "2022年4月17日09:59:16", // 下单时间
          details: false, // 订单详情
          itemlist: [
            {
              item: "仿真凤凰葵散尾葵北欧风装饰客厅落地大栽室内盆景摆件假绿植", // 订单物品
              sum: "2", // 样品数量
              unitPrice: "10", //单价
            },
            {
              item: "仿真凤凰葵散尾葵北欧风装饰客厅落地大栽室内盆景摆件假绿植", // 订单物品
              sum: "2", // 样品数量
              unitPrice: "10", //单价
            },
          ],
          item: "仿真凤凰葵散尾葵北欧风装饰客厅落地大栽室内盆景摆件假绿植", // 订单物品
          sum: "2", // 样品数量
          unitPrice: "10", //单价
          price: "￥300.00", // 订单价格
          address: "孙玲玲15053558987河北省", // 订单地址
          payment: "物流配送/微信支付", // 支付方式
          shipmentStatus: "退货中", // 配送状态
          nextStep: "验收", // 处理步骤
        },
        {
          number: "20224170959163", // 订单号
          time: "2022年4月17日09:59:16", // 下单时间
          details: false, // 订单详情
          itemlist: [
            {
              item: "仿真凤凰葵散尾葵北欧风装饰客厅落地大栽室内盆景摆件假绿植", // 订单物品
              sum: "2", // 样品数量
              unitPrice: "10", //单价
            },
          ],
          item: "仿真凤凰葵散尾葵北欧风装饰客厅落地大栽室内盆景摆件假绿植", // 订单物品
          sum: "2", // 样品数量
          unitPrice: "10", //单价
          price: "￥300.00", // 订单价格
          address: "孙玲玲15053558987河北省", // 订单地址
          payment: "物流配送/微信支付", // 支付方式
          shipmentStatus: "待退货", // 配送状态
          nextStep: "退货", // 处理步骤
        },
      ],
      sels: [], //选中的值显示
      cat_id: "",
      orderBranch: [
        { branch: "全部" ,id:''},
        { branch: "待支付" ,id:'0'},
        { branch: "待发货" ,id:'1'},
        { branch: "已发货" ,id:'2'},
        { branch: "已收货" ,id:'3'},
        { branch: "已完成" ,id:'4'},
        { branch: "已关闭" ,id:'5'},
        { branch: "退款中" ,id:'6'},
      ],
      //搜索筛选
      formInline: {
        page: 1,
        limit: 10,
        name: "",
        payType: 0,
        orderStatus: 0,
        token: localStorage.getItem("logintoken"),
      },
      //搜索中下拉框
      payType: [
        { key: "请选择", value: 0 },
        { key: "现金", value: 1 },
        { key: "支付宝", value: 2 },
        { key: "微信", value: 3 },
        { key: "POS通", value: 4 },
        { key: "闪付", value: 5 },
        { key: "POS通C扫B", value: 6 },
        { key: "银联二维码", value: 8 },
        { key: "会员余额支付", value: 9 },
      ],
      payway: [
        { key: "请选择", value: 0 },
        { key: "初始化", value: 1 },
        { key: "已支付", value: 2 },
        { key: "出货成功", value: 3 },
        { key: "出货失败", value: 4 },
        { key: "订单超时", value: 5 },
        { key: "退款初始化", value: 11 },
        { key: "退款进行中", value: 12 },
        { key: "退款成功", value: 13 },
        { key: "退款失败", value: 14 },
        { key: "订单处理中", value: 10 },
      ],
      disableds: false,
      value: "",
      is_on_sale: "",
      upper: "1",
      pipeSpecis: false, //管理商品规格弹出框
      tableData: [], //管理商品列表
      sort: "1", //排序
      currentPage: 1, //当前页号
      pagesize: 20, //每页大小payway
      param: [],
      kw: "",
      is_sale: "",
      loading: false,
      multipleSelection: [],
      form: {
        //搜索框
        keyword: "",
        cat_id: "",
      },
      image: "",
      formCon1: {
        name: "",
        goods_remark: "",
        image: "",
        class: "",
      },

      keyword: "", //搜索关键字
      agentlisttwo: "", //搜索重定义数组
      key: [],
      is_on_sale: "",
      colin: 0,
      currentPage: 1, //当前页号
      pagesize: 20, //每页大小
      params:'',//存放接口需要的状态
      status:'',//订单状态存放
    };
  },
  computed: {
    page_arrs() {
      let { currentPage, pagesize } = this;
      return this.tableData.slice(
        (currentPage - 1) * pagesize,
        currentPage * pagesize
      );
    },
    current_page() {
      return this.currentPage;
    },
  },
  methods: {
    // 导出订单
    exportd() {
      this.$refs.Popup.centerDialogVisible = true;
    },
    // 接收子组件（导出订单弹窗录入）录入数据
    exportOrder(data) {
      // this.fatherAttriButeValue.push(data);
    },
    // 订单详情页面跳转
    routerDetails(id) {
      this.$router.push({ 
        path: "./OrderDetails",
        query:{
          order_id:id
        }
      });
    },
    // 发货确定
    deliverGoods(index,item,style) {
      if (style == 1) {
        console.log(item,"item")
        this.Delivery = item
        this.$refs.Delivery.centerDialogVisible = true;
      } else if (style == 2) {
        this.$refs.Refund.centerDialogVisible = true;
      } else if (style == 3) {
        this.$refs.IsRefund.centerDialogVisible = true;
      }
      // this.$confirm("确定要发货吗?", "提示", {
      //   confirmButtonText: "确定",
      //   cancelButtonText: "取消",
      //   type: "warning",
      // }).then(() => {
      //   this.orderList[index].shipmentStatus = "已发货";
      //   this.$message({
      //     type: "success",
      //     message: "发货成功",
      //   });currentPag
      // this.$axios({
      //   method: "post",
      //   url: "/index/lunbotu_del",
      //   params: {
      //     id: row.id,
      //   },
      // }).then((res) => {
      //   if (res.status) {
      //     this.getdata();
      //     this.$message({
      //       type: "success",
      //       message: "删除成功",
      //     });
      //   }
      // });
      // });
    },
    //分页
    prePage() {
      this.disableds = false;
      if (this.currentPage == 1) {
        return;
      }
      this.currentPage = this.currentPage - 1;
      this.getdata();
    },
    nextPage() {
      if (this.currentPage <= Math.ceil(this.orderList.length)) {
        return;
      }
      console.log(Math.ceil(this.orderList.length),"Math.ceil(this.orderList.length)")
      this.currentPage = this.currentPage + 1;
      this.params = {
        p:this.currentPage
      }
      this.getdata();
    },
    //搜索
    seach(){
      if(this.orderTime==null){
        this.params = {
          status:this.status,
          page:1,
          order_sn:this.orderNumber
        }
      }else{
        this.params = {
          status:this.status,
          page:1,
          sdate:this.orderTime[0],
          edate:this.orderTime[1],
          order_sn:this.orderNumber
        }
      }
      this.getdata()
    },
    //订单列表
    getdata(){
      let keyword = this.form.keyword;
      this.loading = true;
      this.$axios({
        method: "post",
        url: "/Order/index",
        params:this.params
      }).then((res) => {
        console.log(res, "订单列表");
        this.orderList = res.data.data
        console.log(res.data.data[0].pay_name,'pay_name')
      });
    },
    //点击切换选项卡
    tabBox(index,status) {
      this.colin = index;
      this.status = status
      this.params = {
        status:status,
        page:1
      }
      this.$axios({
        method: "post",
        url: "/Order/index",
        params:this.params
      }).then((res) => {
        console.log(res, "订单列表");
        this.orderList = res.data.data
        console.log(res.data.data[0].pay_name,'pay_name')
      });
    },
  },
  mounted() {
    this.colin = 0; // 选项卡默认选择全部
  },
  created() {
    this.getdata()
    this.getorderData = this.orderList; // 接口获取数据
    if (document.readyState === "complete") this.tabBox();
    else document.addEventListener("load", () => this.tabBox());
    //重定义数组
    this.agentlisttwo = this.tableData;
  },
};
</script>
<style src="../../components/css/pay_css/orderlist.css"  scoped></style>
<style scoped>
</style>